<!-- 默认消息列表页 -->
<script setup lang="ts">
import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
import FilesSelect from '@/components/FilesSelect/index.vue';
import ModelSelect from '@/components/ModelSelect/index.vue';
import WelecomeText from '@/components/WelecomeText/index.vue';
import { useUserStore } from '@/stores';
import { useFilesStore } from '@/stores/modules/files';
import { useModelStore } from '@/stores/modules/model';
import { useSessionStore } from '@/stores/modules/session';

const userStore = useUserStore();
const sessionStore = useSessionStore();
const filesStore = useFilesStore();
const modelStore = useModelStore();

const senderValue = ref('');
const senderRef = ref();

// 处理样本选择事件
async function handleSelectSample(sample: string) {
  // 设置发送框的值为选中的样本
  senderValue.value = sample;

  // 准备图片和文件ID参数
  const imageIds = filesStore.filesList
    .filter(file => file.file.type.startsWith('image/') && file.fileId)
    .map(file => file.fileId) as number[];

  const docIds = filesStore.filesList
    .filter(file => !file.file.type.startsWith('image/') && file.fileId)
    .map(file => file.fileId) as number[];

  // 将聊天内容和文件ID信息保存到localStorage
  localStorage.setItem('chatContent', sample);
  localStorage.setItem('imageIds', JSON.stringify(imageIds));
  localStorage.setItem('docIds', JSON.stringify(docIds));

  // 点击发送时立即清除文件列表
  filesStore.setFilesList([]);

  await sessionStore.createSessionList({
    userId: userStore.userInfo?.userId as number,
    sessionContent: sample,
    sessionTitle: sample.slice(0, 10),
    remark: sample.slice(0, 10),
    model: modelStore.currentModelInfo?.modelName, // 添加模型参数
    modelId: modelStore.currentModelInfo?.id, // 添加模型ID参数
  });
}

// 处理工具消息发送事件
async function handleSendToolMessage(data: { content: string; toolId: number }) {
  // 准备图片和文件ID参数
  const imageIds = filesStore.filesList
    .filter(file => file.file.type.startsWith('image/') && file.fileId)
    .map(file => file.fileId) as number[];

  const docIds = filesStore.filesList
    .filter(file => !file.file.type.startsWith('image/') && file.fileId)
    .map(file => file.fileId) as number[];

  // 将聊天内容和文件ID信息保存到localStorage
  localStorage.setItem('chatContent', data.content);
  localStorage.setItem('imageIds', JSON.stringify(imageIds));
  localStorage.setItem('docIds', JSON.stringify(docIds));
  // 保存工具ID到localStorage
  localStorage.setItem('toolId', data.toolId.toString());

  // 点击发送时立即清除文件列表
  filesStore.setFilesList([]);

  // 创建会话并传递工具ID
  const sessionData = {
    userId: userStore.userInfo?.userId as number,
    sessionContent: data.content,
    sessionTitle: data.content.slice(0, 10),
    remark: data.content.slice(0, 10),
    model: modelStore.currentModelInfo?.modelName,
    modelId: modelStore.currentModelInfo?.id,
    // 添加工具ID参数
    toolId: data.toolId,
  };

  await sessionStore.createSessionList(sessionData);
}

async function handleSend() {
  // 准备图片和文件ID参数
  const imageIds = filesStore.filesList
    .filter(file => file.file.type.startsWith('image/') && file.fileId)
    .map(file => file.fileId) as number[];

  const docIds = filesStore.filesList
    .filter(file => !file.file.type.startsWith('image/') && file.fileId)
    .map(file => file.fileId) as number[];

  // 将聊天内容和文件ID信息保存到localStorage
  localStorage.setItem('chatContent', senderValue.value);
  localStorage.setItem('imageIds', JSON.stringify(imageIds));
  localStorage.setItem('docIds', JSON.stringify(docIds));

  // 点击发送时立即清除文件列表
  filesStore.setFilesList([]);

  await sessionStore.createSessionList({
    userId: userStore.userInfo?.userId as number,
    sessionContent: senderValue.value,
    sessionTitle: senderValue.value.slice(0, 16),
    remark: senderValue.value.slice(0, 16),
    model: modelStore.currentModelInfo?.modelName, // 添加模型参数
    modelId: modelStore.currentModelInfo?.id, // 添加模型ID参数
  });
}

function handleDeleteCard(_item: FilesCardProps, index: number) {
  filesStore.deleteFileByIndex(index);
}

watch(
  () => filesStore.filesList.length,
  (val) => {
    if (val > 0) {
      nextTick(() => {
        senderRef.value.openHeader();
      });
    }
    else {
      nextTick(() => {
        senderRef.value.closeHeader();
      });
    }
  },
);
</script>

<template>
  <div class="chat-defaul-wrap">
    <WelecomeText @select-sample="handleSelectSample" @send-tool-message="handleSendToolMessage" />
    <Sender
      ref="senderRef"
      v-model="senderValue"
      class="chat-defaul-sender"
      :auto-size="{
        maxRows: 2,
        minRows: 1,
      }"
      variant="updown"
      clearable
      :allow-speech="modelStore?.currentModelInfo?.voice_enabled === true"
      @submit="handleSend"
    >
      <template #header>
        <div class="sender-header p-12px pt-6px pb-0px">
          <Attachments
            :items="filesStore.filesList"
            :hide-upload="true"
            @delete-card="handleDeleteCard"
          >
            <template #prev-button="{ show, onScrollLeft }">
              <div
                v-if="show"
                class="prev-next-btn left-8px flex-center w-22px h-22px rounded-8px border-1px border-solid border-[rgba(0,0,0,0.08)] c-[rgba(0,0,0,.4)] hover:bg-#f3f4f6 bg-#fff font-size-10px"
                @click="onScrollLeft"
              >
                <el-icon>
                  <ArrowLeftBold />
                </el-icon>
              </div>
            </template>

            <template #next-button="{ show, onScrollRight }">
              <div
                v-if="show"
                class="prev-next-btn right-8px flex-center w-22px h-22px rounded-8px border-1px border-solid border-[rgba(0,0,0,0.08)] c-[rgba(0,0,0,.4)] hover:bg-#f3f4f6 bg-#fff font-size-10px"
                @click="onScrollRight"
              >
                <el-icon>
                  <ArrowRightBold />
                </el-icon>
              </div>
            </template>
          </Attachments>
        </div>
      </template>
      <template #prefix>
        <div class="flex-1 flex items-center gap-8px flex-none w-fit overflow-hidden">
          <ModelSelect />
          <FilesSelect />
        </div>
      </template>
    </Sender>
  </div>
</template>

<style scoped lang="scss">
.chat-defaul-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 450px;
  .chat-defaul-sender {
    width: 100%;
    max-width: 1000px;
  }
  :deep() {
    .el-sender-content {
      textarea{
        font-size: 16px!important;
      }
    }
    .el-sender-updown-wrap .el-icon svg , .el-sender-action-list .el-icon svg{
      font-size: 14px!important;
      height: 30px;
      width: 30px;
    }

    /* 调整Sender组件下所有深层的el-icon大小 */
    .el-sender .el-icon {
      font-size: 20px!important; /* 调大图标 */
      svg {
        width: 20px!important;
        height: 20px!important;
      }
    }

    /* 调整Sender组件下所有深层的按钮文字大小 */
    .el-sender .el-button {
      font-size: 16px!important; /* 调大按钮文字 */
    }
    .el-send-button:first-child {
      .el-button {
        background-color: #409eff!important;
        border: 1px solid #409eff!important;
        color: #fff!important;
      }
      .el-button.is-disabled {
        background-color: #88c3ff!important;
        border: 1px solid #88c3ff!important;
        color: #fff!important;
      }
    }

    .model-item-content {
      font-size: 16px!important; /* 调大按钮文字 */
    }
    /* 针对prefix插槽的按钮和图标 */
    .el-sender-prefix,
    .el-sender__prefix {
      .el-button {
        font-size: 16px!important;
        .el-icon {
          font-size: 20px!important;
          svg {
            width: 20px!important;
            height: 20px!important;
          }
        }
      }
    }

    /* 针对footer插槽的按钮和图标 */
    .el-sender-footer,
    .el-sender__footer {
      .el-button {
        font-size: 16px!important;
        .el-icon {
          font-size: 20px!important;
          svg {
            width: 20px!important;
            height: 20px!important;
          }
        }
      }
    }
  }
}
@media (max-width: 768px) {
  .chat-defaul-wrap{
    display: block;
    .chat-defaul-sender {
      width: calc(100vw - 8px)!important;
      left: 4px;
      bottom: 12px;
      position: fixed;
      background: #fff;
    }
  }
  .eye-protection-mode{
    .chat-defaul-sender {
      background: #000000!important;
    }
  }

}
</style>
